<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>支出-添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="./js/ie/html5.min.js"></script>
    <script type="text/javascript" src="./js/ie/respond.min.js"></script>
    <![endif]--></head>
<body>

<form class="layui-form" action="" lay-filter="example">

    <div class="layui-form-item">
        <label for="userId" class="layui-form-label">
            <span class="x-red">*</span>所属用户
        </label>
        <div class="layui-input-inline">
            <select name="userId" id="userId">
                <option value="1" th:value="${session.user.id}" th:text="${session.user.nameUser}" >张峰浦11</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="time" class="layui-form-label">
            <span class="x-red">*</span>支出时间</label>
        <div class="layui-input-inline">
            <input type="text" id="time" name="time" placeholder="yyyy-MM-dd HH:mm:ss" required="" lay-verify="required"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="amountofmoney" class="layui-form-label">
            <span class="x-red">*</span>应付金额</label>
        <div class="layui-input-inline">
            <input type="text" id="amountofmoney" name="amountofmoney" required="" lay-verify="required"
                   autocomplete="off" class="layui-input"></div>
    </div>

    <div class="layui-form-item">
        <label for="amountofmoneyactual" class="layui-form-label">
            <span class="x-red">*</span>实际支付金额</label>
        <div class="layui-input-inline">
            <input type="text" id="amountofmoneyactual" name="amountofmoneyactual" required="" lay-verify="required"
                   autocomplete="off" class="layui-input"></div>
    </div>

    <div class="layui-form-item">
        <label for="largeclass" class="layui-form-label">
            <span class="x-red">*</span>大类别
        </label>
        <div class="layui-input-inline">
            <select name="largeclass" id="largeclass">
                <option value="酒水饮品">酒水饮品</option>
                <option value="美食">美食</option>
                <option value="文娱娱乐">文娱娱乐</option>
                <option value="交通通行">交通通行</option>
                <option value="数码周边">数码周边</option>
                <option value="手机电脑">手机电脑</option>
                <option value="家用电器">家用电器</option>
                <option value="居家用品">居家用品</option>
                <option value="其它">其它</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="subclass" class="layui-form-label">
            <span class="x-red">*</span>消费性质</label>
        <div class="layui-input-inline">
            <select name="subclass" id="subclass">
                <option value="日常开销">日常开销</option>
                <option value="个人购物">个人购物</option>
                <option value="代买">代买</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="tradename" class="layui-form-label">
            <span class="x-red">*</span>商品名称</label>
        <div class="layui-input-inline">
            <input type="text" id="tradename" name="tradename" required="" lay-verify="required"
                   autocomplete="off" class="layui-input"></div>
    </div>

    <div class="layui-form-item">
        <label for="satisfactiondegree" class="layui-form-label">
            <span class="x-red">*</span>满意度
        </label>
        <div class="layui-input-inline">
            <select name="satisfactiondegree" id="satisfactiondegree">
                <option value="待定">待定</option>
                <option value="十分满意">十分满意</option>
                <option value="满意">满意</option>
                <option value="一般">一般</option>
                <option value="不满意">不满意</option>
                <option value="退款">退款</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label for="note" class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" id="note" name="note" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#time',
            type: 'datetime'
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //监听提交
        form.on('submit(demo1)', function (data) {
            var userId = document.getElementById("userId").value;
            var time = document.getElementById("time").value;
            var amountofmoney = document.getElementById("amountofmoney").value;
            var amountofmoneyactual = document.getElementById("amountofmoneyactual").value;
            var largeclass = document.getElementById("largeclass").value;
            var subclass = document.getElementById("subclass").value;
            var tradename = document.getElementById("tradename").value;
            var satisfactiondegree = document.getElementById("satisfactiondegree").value;
            var note = document.getElementById("note").value;

            $.ajax({
                type: "post",
                url: "/addNoKeyInsert",
                data: {
                    userId: userId,
                    valid: 1,
                    time: time,
                    amountofmoney: amountofmoney,
                    amountofmoneyactual: amountofmoneyactual,
                    largeclass: largeclass,
                    subclass: subclass,
                    tradename: tradename,
                    satisfactiondegree: satisfactiondegree,
                    note: note
                },
                dataType: 'json',//dataType:"json",使得返回来的数据格式为json 如果不 添加该条属性，则返回来的为字符串
                success: function (data) {
                    // console.log(data["num"]) //取值可以.key值
                    // console.log(data["age"]) //取值可以.key值
                    // console.log(data["peer"]) //取值可以.key值
                },
                error: function (data) {
                    console.log("error");
                    console.log(data)
                }
            });
            layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                },
                function () {

                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                });

            return false;
        });
    });
</script>

</body>


</html>